"use strict";
import * as React from 'react';
const { View, ScrollView, ImageBackground, TouchableOpacity, Image } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import { buildingExtraInfo, buildingGuideMainInfo } from "../../assets/data";
import { SCREEN_WIDTH } from "../../constant";
const { List, InputItem, DatePicker } = require('antd-mobile');
class BuildingGuidePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.onExtraInfoItemPress = (item) => {
            if (item.target) {
                Actions.push(item.target, Object.assign({ title: item.name }, item));
            }
        };
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date()
        };
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: '建筑指南', tintColor: '#fff' }}/>
                <View style={[commonStyles.flex1]}>
                    <ScrollView>
                        <ImageBackground source={require('../../assets/image/background_three.png')} style={{ width: SCREEN_WIDTH }}>
                            {buildingGuideMainInfo.map((item, index) => {
            if (index === buildingGuideMainInfo.length - 1) {
                return <GuideItem icon={item.icon} data={item.data} key={index}/>;
            }
            else {
                return [<GuideItem icon={item.icon} key={`item_${index}`} data={item.data}/>,
                    <Line color={'#575757'} key={`line_${index}`} height={2}/>];
            }
        })}
                        </ImageBackground>
                        {buildingExtraInfo.map((item, index) => {
            return (<TouchableOpacity key={index} onPress={this.onExtraInfoItemPress.bind(this, item)}>
                                    <View style={[commonStyles.flexRow, commonStyles.listItem, {
                    backgroundColor: Colors.White,
                    justifyContent: 'space-between',
                    padding: 15
                }]}>
                                        <MyText color={Colors.Title}>{item.name}</MyText>
                                        <MyIcon name={'icon-iconfontyoujiantou'} color={Colors.Black}/>
                                    </View>
                                    <Line color={Colors.Background}/>
                                </TouchableOpacity>);
        })}
                    </ScrollView>
                </View>
            </View>);
    }
}
export default connect(({ auth, place }) => ({ auth, place }))(BuildingGuidePage);
const GuideItem = (props) => {
    if (!Array.isArray(props.data)) {
        return (<View style={[commonStyles.flexRow, { paddingVertical: autoSize(33), paddingHorizontal: autoSize(15) }]}>

                <Image source={props.icon} width={30} height={30}/>
                <View style={[commonStyles.flex1, {
                marginLeft: 10,
            }]}>
                    <MyText color={'#fff'} fontSize={16}>{props.data.label}</MyText>
                    <MyText color={'#AEADAD'} fontSize={18} fontWeight={'500'} style={{ marginTop: 5 }}>{props.data.value}</MyText>
                </View>
            </View>);
    }
    else {
        return (<View style={[commonStyles.flexRow, { paddingVertical: autoSize(33), paddingHorizontal: autoSize(15) }]}>
                <View style={[commonStyles.flexRow, { flex: 0.6 }]}>
                    <Image source={props.icon} width={30} height={30}/>
                    <View style={[commonStyles.flex1, { marginLeft: 10 }]}>
                        <MyText color={'#AEADAD'} numberOfLines={1} fontSize={16}>{props.data[0].label}</MyText>
                        <MyText color={'#fff'} numberOfLines={1} fontSize={18} fontWeight={'500'} style={{ marginTop: 5 }}>{props.data[0].value}</MyText>
                    </View>
                </View>
                <View style={{ display: 'flex', flex: 0.4 }}>
                    <MyText color={'#AEADAD'} numberOfLines={1} fontSize={16}>{props.data[1].label}</MyText>
                    <MyText color={'#fff'} numberOfLines={1} fontSize={18} fontWeight={'500'} style={{ marginTop: 5 }}>{props.data[1].value}</MyText>
                </View>
            </View>);
    }
};
